<template>
    <div>
        <Modal v-model="showModal" :width="modalWidth" @on-cancel="rightClose" :footer-hide="true"   >
            <p slot="header" style="color:#f60;text-align:center">
                <span>任务日志:{{taskId}}</span>
            </p>
            <div style="">
                <Row style="margin:0px 0px 5px 5px">
                    <i-col span="1" >
                        <Button  size="default"  type="primary"  @click="btn_refresh">刷新</Button>
                    </i-col>
                </Row>
                <i-table size="default"   border stripe  :columns="format" :data="show_list" :height="350" >
                </i-table >
                <div style="text-align: center;margin-top: 10px;">
                    <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-total show-sizer/>
                </div>
            </div>
        </Modal>
    </div>
</template>
<script>

import { get_task_log } from  '@/api'
import { post } from '@/api/http'
import { formatUtcTime } from '@/common/util' 
export default {
    name: 'taskLogModal',
    props: {
        isShow: {
            type: Boolean,
        }, 
        taskId: {
            type: Number,
        },
        boxwidth:{
            type: String
        },
    },
    data() {
        return {
            format: [
                {
                    title: '序列号',key: 'id'
                },
                // {
                //     title: '任务Id',key: 'task_id'
                // },
                {
                    title: '任务名称',key: 'task_name'
                },
                {
                    title: '日志内容',key: 'content'
                },
                {
                    title: '创建时间',key: 'create_time',
                    render:(h,params) => {
                        let value = params.row.create_time
                        let toLocal = formatUtcTime(value)
                        return h('span',toLocal)
                    }
                },
            ],
            // 分页
            total_list: [],
            show_list: [],
            total: 0,
            page: 1,
            pageSize: 50,
            //
            showModal: false,
            modalWidth: this.boxwidth,
        }
    },
    methods: {
		btn_refresh(){
            this.refresh()
        },
        rightClose(){
            this.$emit('closeModal')
        },
        changePage(page) {
            this.page=page
            this.refresh()
        },
        // 每页条数变更
        changePageSize(pageSize){
            this.pageSize = pageSize
            this.refresh()
        },
        refresh() {
            let data = {
                "pageSize":this.pageSize,
                "page":this.page,
                "task_id":this.taskId,
            }
            post(get_task_log,data).then(response =>{
                let data = response.data
                this.total  = data.total
                this.show_list = data.data
            })
        }
    },
    watch: {
        isShow(newVal) {
            this.refresh();
            setTimeout(() =>{
                this.showModal = newVal
            },200); 
            
        },
        boxwidth(newVal) {
            console.log(newVal)
            this.modalWidth = newVal
        },
    }
}
</script>
<style scoped>

</style>